<template>
  <scroll-view
    class="p-main-continar"
    :style="{ height: scrollH + 'px' }"
    :scrollY="true"
    :refresherEnabled="true"
    :upperThreshold="16"
    :refresherTriggered="refresherTriggered"
    :enhanced="true"
    :showScrollbar="false"
    refresherDefaultStyle="white"
    :refresherBackground="background"
    @scroll="scroll"
    @scrolltoupper="onUpper"
    @scrolltolower="onLower"
    @refresherrefresh="onRefresh"
  >
    <view class="scroll-wrap">
      <CSwiper :bananers="bananers"></CSwiper>
      <CGrid></CGrid>
      <view style="height:2000px;content: ' ';"></view>
    </view>
  </scroll-view>
</template>

<script setup>
import { ref, defineEmits, defineProps } from 'vue'
import { useDidShow, getStorageSync } from '@tarojs/taro'
import { Toast } from '@nutui/nutui-taro'
import { getSysInfo } from '@/common/system'
import CGrid from '@/components/c-grid'
import CSwiper from '@/components/c-swiper'

const props = defineProps({
  background: {
    type: String,
    default: 'linear-gradient(to bottom right, #ffa7b5, #ff5177)'
  }
})

const scrollH = ref(500)
const emit = defineEmits(['scroll'])
const scroll = ({ detail }) => {
  const { scrollTop } = detail
  emit('scroll', scrollTop)
}

const refresherTriggered = ref(false)
const onRefresh = () => {
  setTimeout(() => scroll({ detail: { scrollTop: 0 } }), 0)
  if (refresherTriggered.value) return
  refresherTriggered.value = true
  setTimeout(() => {
    refresherTriggered.value = false
  }, 1200)
}

const onUpper = e => {
  setTimeout(() => scroll({ detail: { scrollTop: 0 } }), 0)
}

const lowerTriggered = ref(false)
const onLower = () => {
  if (lowerTriggered.value) return
  lowerTriggered.value = true
  setTimeout(() => {
    lowerTriggered.value = false
  }, 2000)
}

// const grids = ref([
//   { label: '电影', icon: '1_dianying-51' },
//   { label: '影视VIP', icon: 'VIP' },
//   { label: '美食', icon: '1_huoguo-38' },
//   { label: '奶茶', icon: 'zhenzhunaicha' }
// ])

const bananers = ref([
  { id: '电影', url: 'https://oss.fxzb.vip/202206/18ba1e92952b1d4f2c7d04d63149ddb9.png' },
  { id: '影视VIP', url: 'https://oss.fxzb.vip/202206/7c8f828d5d05aad34a640015c76947dd.png' },
  { id: '美食', url: 'https://oss.fxzb.vip/202205/e6c51e5c75c424618880b8a0f3d6db4a.png' }
])

useDidShow(() => {
  setTimeout(() => {
    const { topBarH, windowHeight } = getSysInfo()
    scrollH.value = windowHeight - topBarH
  }, 0)
})
</script>

<style lang="scss">
@import '@/assets/styles/custom_theme.scss';
.p-main-continar {
  background: linear-gradient(to bottom right, #ff7f95, #ff2755);
  .scroll-wrap {
    min-height: 100%;
    padding: 12px;
    box-sizing: border-box;
    background: $bg-color;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    .grid-box {
      margin-top: 12px;
    }
  }
}
</style>
